<script>
export default {
  name: 'cusTree',
  props: {
    treeData: {
      type: [Object, Array],
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      scaleX: 1,
      scaleY: 1,
      left: null
    }
  },
  methods: {
    getIdFun(obj) {
      this.$emit('getId', obj)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scaleX = this.$refs.treeBody.clientWidth / this.$refs.treeBodyView.clientWidth
      this.scaleY = this.$refs.treeBody.clientHeight / this.$refs.treeBodyView.clientHeight
      this.left = `-${this.$refs.treeBody.clientWidth / 2}px`
    })
  }
}
</script>

<template>
  <div class="treeBody" ref="treeBody">
    <div class="treeBody_view" ref="treeBodyView" :style="{ }" v-if="treeData">
      <tree-parents @getId="getIdFun" :treeData="treeData"></tree-parents>
    </div>
  </div>
</template>

<style scoped lang="scss">
.treeBody {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;

  .treeBody_view {
    transform-origin: left center;
    min-width: 100%;
    width: max-content;
    min-height: 100%;
    height: auto;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
